<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>搜索页面</title>

  <link href="static/css/amazeui.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/admin.css" rel="stylesheet" type="text/css"/>

  <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>

  <link href="static/css/seastyle.css" rel="stylesheet" type="text/css"/>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <script type="text/javascript" src="static/js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="static/js/script.js"></script>
</head>

<body>
<div id="container4">
  <!--顶部导航条 -->
  <div class="am-container header">
    <ul class="message-l">
      <div class="topMessage">
        <div class="menu-hd">
          <a href="#" target="_top" class="h">亲，请登录</a>
          <a href="#" target="_top">免费注册</a>
        </div>
      </div>
    </ul>
    <ul class="message-r">
      <div class="topMessage home">
        <div class="menu-hd"><a href="index.html" target="_top" class="h"><i
          class="am-icon-home">商城首页</i></a></div>
      </div>
      <div class="topMessage my-shangcheng">
        <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
        </div>
      </div>
      <div class="topMessage mini-cart">
        <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
          class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a>
        </div>
      </div>
      <div class="topMessage favorite">
        <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
        </div>
      </div>
    </ul>
  </div>
  <!--悬浮搜索框-->
  <div class="nav white">
    <div class="logo"><img src="static/images/logo.png"/></div>
    <div class="logoBig">
      <li><img src="static/images/logo.png"/></li>
    </div>

    <div class="search-bar pr">
      <a name="index_none_header_sysc" href="#"></a>
      <form>
        <input id="searchInput" v-model="keyword" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
      </form>
    </div>
  </div>
  <div class="clear"></div>
  <b class="line"></b>
  <div class="search">
    <div class="search-list">
      <div class="nav-table">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
          <ul>
            <li class="index"><a href="index.html">首页</a></li>
            <li class="qc"><a href="#">闪购</a></li>
            <li class="qc"><a href="#">限抢</a></li>
            <li class="qc"><a href="#">团购</a></li>
            <li class="qc last"><a href="#">优惠</a></li>
          </ul>
          <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
          </div>
        </div>
      </div>
      <div class="am-g am-g-fixed">
        <div class="am-u-sm-12 am-u-md-12">
          <div class="theme-popover">
            <div class="searchAbout">
              <span class="font-pale">相关搜索：</span>
              <a title="坚果" href="#">坚果</a>
              <a title="瓜子" href="#">瓜子</a>
              <a title="鸡腿" href="#">豆干</a>
            </div>
            <ul class="select">
              <p class="title font-normal">
                <span class="fl">虾条</span>
                <span class="total fl">搜索到<strong class="num">10</strong>件相关商品</span>
              </p>
              <div class="clear"></div>
              <li class="select-result">
                <dl>
                  <dt>已选</dt>
                  <dd class="select-no"></dd>
                  <p class="eliminateCriteria">清除</p>
                </dl>
              </li>
              <div class="clear"></div>
              <li class="select-list">
                <dl id="select1">
                  <dt class="am-badge am-round">品牌</dt>
                  <div class="dd-conent">
                    <dd class="select-all selected"><a href="#">全部</a></dd>
                    <template v-for="(brand, index) in brands">
                      <dd><a href="#">{{ brand }}</a></dd>
                    </template>
                  </div>
                </dl>
              </li>
            </ul>
            <div class="clear"></div>
          </div>
          <div class="search-content">
            <div class="sort">
              <li class="first"><a title="综合">综合排序</a></li>
              <li><a title="销量">销量排序</a></li>
              <li><a title="价格">价格优先</a></li>
              <li class="big"><a title="评价">评价为主</a></li>
            </div>
            <div class="clear"></div>
            <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
              <template v-for="(product, index) in productList.list"> <!--此时的product表示的是一个Product4ES对象-->
                <li>
                  <div class="i-pic limit" @click="toIntroduction(product.productId)">
                    <img :src="'static/pimgs/' + product.productImg"/>
                    <p class="title fl">【<span v-html="product.productName"></span>】{{ product.productSkuName }}</p>
                    <p class="price fl">
                      <b>¥</b>
                      <strong>{{ product.productSkuPrice }}</strong>
                    </p>
                    <p class="number fl">
                      销量<span>{{ product.soldNum }}</span>
                    </p>
                  </div>
                </li>
              </template>
            </ul>
          </div>
          <div class="clear"></div>
          <!--分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="limit"
            :total="count"
            :current-page="pageNum"
            @current-change="pager">
          </el-pagination>
        </div>
      </div>
      <div class="footer">
        <div class="footer-hd">
          <p>
            <a href="#">锋迷商城</a>
            <b>|</b>
            <a href="#">商城首页</a>
            <b>|</b>
            <a href="#">支付宝</a>
            <b>|</b>
            <a href="#">物流</a>
          </p>
        </div>
        <div class="footer-bd">
          <p>
            <a href="#">关于千锋</a>
            <a href="#">合作伙伴</a>
            <a href="#">联系我们</a>
            <a href="#">网站地图</a>
            <em>©qfedu.com 版权所有</em>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  window.jQuery || document.write('<script src="static/js/jquery-1.9.min.js"><\/script>');
</script>
<script type="text/javascript" src="static/js/quick_links.js"></script>
<script type="text/javascript" src="static/js/cookie-utils.js" ></script>
<script type="text/javascript" src="static/js/vue.js" ></script>
<script type="text/javascript" src="static/js/axios.min.js" ></script>
<script type="text/javascript" src="static/js/utils.js"></script>
<!-- 引入组件库 这个必须放下下面，放在上面加载不出来-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>

<script type="text/javascript">
  var vm = new Vue({
    el: "#container4",
    data: {
      cid: "",
      pageNum: 1,
      limit: 4,
      productList: {},
      count: 0,
      brands: [],
      keyword: ""
    },
    created() {
      //获取从上个页面传递过来的参数
      this.cid = getUrlParam("cid")
      this.keyword = getUrlParam("keyword")

      if (this.cid != null && this.cid != "") {
        axios.get("static/hook/search/listbycid-49." + this.pageNum + ".json").then(res => {
          if (res.data.code == 10000) {
            this.productList = res.data.data
            this.count = res.data.data.count
          }
        })
        //根据类别，查询此类别下商品的品牌
        axios.get("static/hook/search/brand-49.json").then(res => {
          this.brands = res.data.data
        })
      } else if (this.keyword != null && this.keyword != "") {
        //根据关键字查询商品信息
        axios.get("static/hook/search/listbykeyword-xiatiao-" + this.pageNum + ".json").then(res => {
          if (res.data.code == 10000) {
            this.productList = res.data.data
            this.count = res.data.data.count
          }
        })
        //根据关键字查询品牌列表
        axios.get("static/hook/search/brandbykw-xiatiao.json").then(res => {
          if (res.data.code == 10000) {
            this.brands = res.data.data
          }
        })
      }
    },
    methods: {
      pager(currentPage) {
        this.pageNum = currentPage
        if (this.cid != null && this.cid != "") {
          axios.get("static/hook/search/listbycid-49." + this.pageNum + ".json").then(res => {
            if (res.data.code == 10000) {
              this.productList = res.data.data
              this.count = res.data.data.count
            }
          })
        } else if (this.keyword != null && this.keyword != "") {
          //根据关键字查询商品信息
          axios.get("static/hook/search/listbykeyword-xiatiao-" + this.pageNum + ".json").then(res => {
            if (res.data.code == 10000) {
              this.productList = res.data.data
              this.count = res.data.data.count
            }
          })
        }
      },
      toIntroduction(productId) {
        window.location.href = "introduction.html?pid=" + productId
      }
    }
  })
</script>
</body>
</html>
